<style lang="less" scoped>
@import "../../styles/common.less";
@import "./components/table.less";
.detail-item {
  width: 33.333%;
  padding: 8px 12px 8px 0;
  @media screen and (max-width: 768px) {
    width: 100%;
    border-bottom: 1px dotted #ddd;
  }
}
.info-panel {
  margin-top: 10px;
}
.info-panel:last-of-type {
  align-self: flex-start;
}
.top10-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px dashed #ccc;
}
.top10-row:first-of-type {
  padding-top: 0;
}
.top10-row:last-of-type {
  border-bottom: none;
}
.top10-name {
  padding: 0 4px;
  color: #000;
}
.top10-digit {
  padding: 0 4px;
  color: #444;
}
</style>

<template>
    <div>
        <Row>
            <Card style="margin-bottom: 10px;">
                <div slot="title" style="padding: 0 12px;">
                    <h4 style="display: inline-block; margin-right: 8px">AC详情：{{this.acData[0].name}}</h4> 
                    <!-- <Button type="primary" shape="circle" @click="jump2Analysis()" style="display: inline-block; padding: 4px 8px;"><Icon type="medkit"></Icon> </Button> -->
                </div>
                <div style="padding: 0 12px; display: flex; justify-content: flex-start; flex-wrap: wrap;">
                    <div class="detail-item"><strong>状态: </strong><Tag :color="acData[0].status === 'Up' ? 'green' : 'red'">{{acData[0].status}}</Tag></div>
                    <div class="detail-item"><strong>配置: </strong>{{acData[0].configuration}}</div>
                    <div class="detail-item"><strong>固件: </strong>{{acData[0].firmware}}</div>
                    <div class="detail-item"><strong>角色: </strong>{{acData[0].role}}</div>
                    <div class="detail-item"><strong>主IP: </strong>{{acData[0].master_IP}}</div>
                    <div class="detail-item"><strong>备用主控制器: </strong><a>{{acData[0].standby_master}}</a></div>
                    <div class="detail-item"><strong>型号: </strong>{{acData[0].type}}</div>
                    <div class="detail-item"><strong>最后连接: </strong>{{acData[0].last_contacted}}</div>
                    <div class="detail-item"><strong>运行时间: </strong>{{acData[0].uptime}}</div>
                    <div class="detail-item"><strong>LAN MAC地址: </strong>{{acData[0].Lan_MAC}}</div>
                    <div class="detail-item"><strong>序列号: </strong>{{acData[0].serial}}</div>
                    <div class="detail-item"><strong>位置: </strong>{{acData[0].Location}}</div>
                    <div class="detail-item"><strong>IP: </strong>{{acData[0].IP}}</div>
                    <div class="detail-item"><strong>使用率: </strong>{{acData[0].usage}}</div>
                    <div class="detail-item"><strong>VPN会话数: </strong>{{acData[0].VPN_sessions}}</div>
                    <div class="detail-item"><strong>VPN使用: </strong>{{acData[0].VPN_usage}}</div>
                    <div class="detail-item"><strong>备注: </strong>{{acData[0].notes}}</div>
                </div>
            </Card>
            <Card style="margin-bottom: 10px; min-height: calc(100vh - 510px)">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <Tabs :value="tableMode" style="margin-bottom: 0"  type="card" @on-click="this.switchTab">
                        <TabPane label="AP列表" name="AP" icon="navicon" ></TabPane>
                        <TabPane label="终端列表" name="client" icon="iphone"></TabPane>
                    </Tabs>
                    <div>
                        <Tooltip content="排序和过滤后的数据">
                            <Button type="primary" size="large" @click="exportData(2)"><Icon type="funnel"></Icon> </Button>
                        </Tooltip>
                        <Tooltip content="原始数据">
                            <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download"></Icon> </Button>
                        </Tooltip>
                    </div>
                </div>
                <Row>
                    <Col span="24" v-show="tableMode==='AP'">
                        <Table :columns="apColumns" :data="apData" size="small" ref="apData"></Table>
                    </Col>
                    <Col span="24" v-show="tableMode==='client'">
                        <Table :columns="clientColumns" :data="clientData" size="small" ref="clientData"></Table>
                    </Col>
                </Row>
            </Card>
            <Card style="min-height: 500px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <Tabs :value="tagMode" type="card" style="margin-bottom: 0" @on-click="switchLineTab">
                        <TabPane label="健康度" name="health"></TabPane>
                        <TabPane label="AP在线情况" name="AP"></TabPane>
                        <TabPane label="客户端数量" name="client"></TabPane>
                        <TabPane label="故障事件" name="event"></TabPane>
                        <TabPane label="出入带宽" name="bandwidth"></TabPane>
                    </Tabs>
                    <div>
                        <Tooltip content="数据下载">
                            <Button type="text" style="padding: 4px 4px 0"><Icon type="ios-cloud-download-outline" size="24"></Icon> </Button>
                        </Tooltip>
                    </div>
                </div>
                <Row :gutter="10">
                    <div>
                        <chart :options="selectedOption" style="width: 100%;" auto-resize></chart>
                    </div>
                </Row>
            </Card>
            <Row :gutter="10" type="flex" justify="start">
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>终端流量Top10</h4>
                            <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div style="height: 300px; padding: 0 8px">
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端1</a></span><span class="top10-digit">83.12GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端2</a></span><span class="top10-digit">64.20GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端3</a></span><span class="top10-digit">15.97GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端4</a></span><span class="top10-digit">14.92GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端5</a></span><span class="top10-digit">14.92GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端6</a></span><span class="top10-digit">14.92GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端7</a></span><span class="top10-digit">14.92GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端8</a></span><span class="top10-digit">14.92GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端9</a></span><span class="top10-digit">14.92GB</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端10</a></span><span class="top10-digit">14.92GB</span></div>
                        </div>
                    </Card>
                </Col>
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>终端在线时长Top10</h4>
                            <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div style="height: 300px; padding: 0 8px">
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端1</a></span><span class="top10-digit">124.12小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端2</a></span><span class="top10-digit">94.15小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端3</a></span><span class="top10-digit">45.99小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端4</a></span><span class="top10-digit">14.92小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端5</a></span><span class="top10-digit">14.92小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端6</a></span><span class="top10-digit">14.92小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端7</a></span><span class="top10-digit">14.92小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端8</a></span><span class="top10-digit">14.92小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端9</a></span><span class="top10-digit">14.92小时</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="/#/client-detail/C0:33:5E:11:86:E9">测试终端10</a></span><span class="top10-digit">14.92小时</span></div>
                        </div>
                    </Card>
                </Col>
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>出口IP/域名Top10</h4>
                            <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div style="height: 300px; padding: 0 8px">
                            <div class="top10-row"><span class="top10-name"><a href="http://123.137.49.19">123.137.49.19</a></span><span class="top10-digit">8314</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="http://baidu.com">baidu.com</a></span><span class="top10-digit">7491</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="http://yingxuys.com">yingxuys.com</a></span><span class="top10-digit">1345</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="123.137.49.19">123.137.49.19</a></span><span class="top10-digit">513</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="123.137.49.19">123.137.49.19</a></span><span class="top10-digit">424</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="123.137.49.19">123.137.49.19</a></span><span class="top10-digit">194</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="123.137.49.19">123.137.49.19</a></span><span class="top10-digit">185</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="123.137.49.19">123.137.49.19</a></span><span class="top10-digit">185</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="123.137.49.19">123.137.49.19</a></span><span class="top10-digit">185</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="123.137.49.19">123.137.49.19</a></span><span class="top10-digit">185</span></div>
                        </div>
                    </Card>
                </Col>
                <div class="info-panel"></div>
            </Row>
        </Row>
    </div>
</template>

<script>
import { apData, apColumns } from "./data/AP.js";
import { acData } from "./data/AC.js";
import { clientData, clientColumns } from "./data/client.js";
import { DHCPOption } from "./analysis-data/DHCP";
import { DNSOption } from "./analysis-data/DNS";
import { AAAOption } from "./analysis-data/AAA";
import { APhealthOption } from "./analysis-data/AP-health";
import { APOnlineOption } from "./analysis-data/AP-online";
import { clientOption } from "./analysis-data/client";
import { eventOption } from "./analysis-data/events";
import { bandwidthOption } from "./analysis-data/bandwidth";
import { deviceTypeOption } from "./analysis-data/pie/client-type";
import { eventTypeOption } from "./analysis-data/pie/event-type";
import { radioTypeOption } from "./analysis-data/pie/radio";
import { SNROption } from "./analysis-data/pie/SNR";
import moment from "moment";

export default {
  name: "AC-detail",
  data() {
    return {
      apData,
      apColumns,
      acData,
      clientData,
      clientColumns,
      tableMode: "AP",
      selectedDateRange: [
        moment()
          .subtract(6, "days")
          .format("L"),
        moment().format("L")
      ],
      dateOptions: {
        disabledDate(date) {
          const disabledDay = date.getDate();
          return date && date.valueOf() > Date.now();
        }
      },
      tagMode: "health",
      deviceTypeOption,
      eventTypeOption,
      radioTypeOption,
      SNROption,
      loadingDevice: false,
      selectedDevice: this.$route.query.id || "SLR01-WiFi-08a",
      deviceOptions: []
    };
  },
  computed: {
    selectedOption() {
      return {
        DHCP: DHCPOption,
        DNS: DNSOption,
        AAA: AAAOption,
        health: APhealthOption,
        AP: APOnlineOption,
        client: clientOption,
        event: eventOption,
        bandwidth: bandwidthOption
      }[this.tagMode];
    }
  },
  methods: {
    jump2Analysis(value) {
      this.$router.push({
        name: "event-test",
      });
    },
    switchLineTab(name) {
      this.tagMode = name;
    },
    switchTab(name) {
      this.tableMode = name;
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.tableCsv.exportCsv({
          filename: "原始数据"
        });
      } else if (type === 2) {
        this.$refs.tableCsv.exportCsv({
          filename: "排序和过滤后的数据",
          original: false
        });
      }
    }
  }
};
</script>
